<alert *ngFor="let alert of alerts;let i = index" [type]="alert.type" dismissible="true" closable="false" [dismissOnTimeout]="alert.dismissOnTimeout">
    {{ alert?.msg }}
</alert>
<div class="container">
    <div class="add-user-container">
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <form class="form-horizontal" role="form" #f="ngForm" (ngSubmit)="submitForm(f)">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">UserName</label>
                        <div class="col-sm-10">
                            <input class="form-control" placeholder="UserName" required minlength="2" maxlength="32" [(ngModel)]="userName" name="userName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">NickName</label>
                        <div class="col-sm-10">
                            <input class="form-control" placeholder="NickName" required  minlength="2" maxlength="32" [(ngModel)]="nickName" name="nickName">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-success" [disabled]="!f.form.valid">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>